<template>
  <div class="main">
    <div class="box">
      <div>
        <el-button-group>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="(query.CurrentPage = 1), getList()"
            >刷新</el-button
          >
          <el-button
            type="success"
            size="small"
            icon="el-icon-plus"
            @click="dialogVisible = true"
            v-if="todo_data.按钮权限 == 'true'"
            >增加</el-button
          >
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit-outline"
            @click="edit_row"
            :disabled="isBtnStatus != 0"
            v-if="todo_data.按钮权限 == 'true'"
            >修改</el-button
          >
          <!-- <el-button
            type="danger"
            size="small"
            icon="el-icon-s-check"
            @click="sp_click"
            v-if="Permissions == '医务科审核'"
            :disabled="isBtnStatus != 0"
            >审批</el-button
          > -->
          <el-button
            type="warning"
            size="small"
            icon="el-icon-delete"
            @click="deletl_row"
            :disabled="isBtnStatus != 0"
            v-if="todo_data.按钮权限 == 'true'"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="small"
            icon="el-icon-document"
            @click="exportExcel"
            >导出</el-button
          >
        </el-button-group>
      </div>
      <div class="mt10" v-loading="isLoading">
        <el-table
          :data="arrayExport"
          border
          style="width: 100%"
          height="550"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <template v-for="(item, index) in tableLable">
            <el-table-column
              :key="index"
              :prop="item"
              :label="item"
              v-if="item != '附件' && item != '_id' && item != '状态'"
            >
            </el-table-column>
            <el-table-column
              :key="index"
              :prop="item"
              :label="item"
              v-if="item == '附件'"
            >
              <template slot-scope="scope">
                <span
                  style="color: blue; border-bottom: 1px solid blue"
                  v-if="scope.row.附件"
                  @click="open_windo(scope.row.附件)"
                  ><i style="font-size: 24px" class="el-icon-folder-checked"></i
                  >查看</span
                ><span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              :key="index"
              :prop="item"
              :label="item"
              v-if="item == '状态'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.状态 | status }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <div class="mt10 tar">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange_page"
          :current-page="query.CurrentPage"
          :page-sizes="[10, 15, 50, 100]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="query.total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 业务弹层 -->
    <el-dialog
      :title="name"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="max-height: 50vh; overflow: auto">
        <table border="1" cellspacing="0" style="width: 100%" class="table">
          <tr>
            <td class="tac">事件类型：</td>
            <td>
              <el-input
                v-model="form.事件类型"
                placeholder=""
                change="dpib"
                style="width: 100%"
                size="small"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">事件开始日期：</td>
            <td>
              <el-date-picker
                v-model="form.事件开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                size="small"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td class="tac">事件结束日期：</td>
            <td>
              <el-date-picker
                v-model="form.事件结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                size="small"
                placeholder="选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td class="tac">内容：</td>
            <td>
              <el-input
                v-model="form.内容"
                placeholder=""
                change="dpib"
                style="width: 100%"
                size="small"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">备注：</td>
            <td>
              <el-input
                v-model="form.备注"
                placeholder=""
                change="dpib"
                style="width: 100%"
                size="small"
                type="textarea"
                :rows="3"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">附件：</td>
            <td>
              <el-upload
                v-if="附件Show"
                class="upload-demo"
                drag
                :action="baseUrl.bsIp + '/api/Bs/UploadFile?tableName=不良记录'"
                :on-success="upload_success"
                :on-remove="upload_delete"
                style="width: 100%"
                :headers="headers"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
              </el-upload>
              <div
                style="
                  display: inline-block;
                  padding: 0 10px;
                  color: blue;
                  border-bottom: 1px solid blue;
                  margin-bottom: 5px;
                  margin-left: 15px;
                  cursor: pointer;
                "
                v-else
              >
                <span @click="open_windo(form.附件)"
                  ><i style="font-size: 24px" class="el-icon-folder-checked"></i
                  >查看</span
                ><span
                  style="margin-left: 10px"
                  @click="(form.附件 = ''), (附件Show = true)"
                  >删除</span
                >
              </div>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btn_ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    todo_data: { type: Object, default: {} },
  },
  data() {
    return {
      name: "不良记录",
      headers: {
        Token: window.sessionStorage.getItem("Token"),
      },
      Permissions: window.localStorage.getItem("Permissions"),
      query: {
        tableName: "不良记录",
        pageSize: 10,
        CurrentPage: 1,
        total: 0,
        Filter: {
          人员姓名: "",
          人员ID: "",
        },
      },
      tableData: [],
      tableLable: [
        "_id",
        "事件类型",
        "事件开始日期",
        "事件结束日期",
        "内容",
        "备注",
        "附件",
      ],
      userList: [],
      currentRow: null,
      dialogVisible: false,
      dialogVisible_sp: false,
      form: {
        UserList: [],
      },
      form_sp: {},
      isLoading: false,
      keyWords: "",
      arrayExport: [],
      baseUrl: baseUrl,
      附件Show: true,
      _id: "",
      btn_loading: false,
      isBtnStatus: 0,
      isTime: [],
    };
  },
  filters: {
    status(val) {
      var str = "";
      if (val == 0) {
        str = "未审核";
      }
      if (val == 1) {
        str = "已审核";
      }
      if (val == 2) {
        str = "已拒绝";
      }
      return str;
    },
  },
  mounted() {
    this.query.Filter.人员ID = this.todo_data.人员ID;
    this.query.Filter.人员姓名 = this.todo_data.人员姓名;
    this.getList();
    this.getUserList();
  },
  methods: {
    getList() {
      this.arrayExport = [];
      this.isLoading = true;
      this.$post("/Bs/GetPageList", this.query)
        .then((res) => {
          if (res.StatusCode != 200) {
            this.$notify.error({
              title: "错误",
              message: res.Errors,
            });
            this.isLoading = false;
            return;
          } else {
            this.tableData = res.Data.PageList;
            this.query.total = res.Data.Total;
            this.handleExportData();
            this.isLoading = false;
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    getUserList() {
      this.$post("/Bs/GetAllUserList").then((res) => {
        this.userList = res.Data;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.CurrentPage = 1;
      this.getList();
    },
    handleCurrentChange_page(val) {
      console.log(val);
      this.query.CurrentPage = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(this.currentRow);
      this.isBtnStatus = val.状态;
    },
    handleClose() {
      this.dialogVisible = false;
      this.form = { UserList: [] };
      this._id = "";
      this.附件Show = true;
    },
    handleClose_sp() {
      this.dialogVisible_sp = false;
      this.form_sp = {};
    },
    btn_ok() {
      var body = {
        tableName: this.name,
        data: this.form,
        userList: this.form.UserList,
        userId: "",
        sectionId: "",
        hospitalId: "",
        _id: this._id,
      };
      body.data.人员ID = this.todo_data.人员ID;
      body.data.人员姓名 = this.todo_data.人员姓名;
      var url = body._id ? "/Bs/UpdateData" : "/Bs/InsertData";
      this.$post(url, body).then((res) => {
        if (res.StatusCode != 200) {
          this.$notify.error({
            title: "错误",
            message: res.Errors,
          });
          return;
        } else {
          this.getList();
          this.handleClose();
        }
      });
    },
    btn_ok_sp(flag) {
      var body = {
        tableName: "不良记录",
        status: flag,
        opinion: this.form_sp.opinion,
        _id: this.currentRow._id,
      };
      this.btn_loading = true;
      this.$post("/Bs/Approve", body).then((res) => {
        if (res.StatusCode != 200) {
          this.$notify.error({
            title: "错误",
            message: res.Errors,
          });
          this.btn_loading = false;
          return;
        }
        this.getList();
        this.handleClose_sp();
        this.btn_loading = false;
      });
    },
    edit_row() {
      if (this.currentRow == null) {
        this.$notify.error({
          title: "错误",
          message: "请选中一条数据后操作！",
        });
        return;
      }
      this.isLoading = true;
      this.$post("/Bs/GetOne/不良记录/" + this.currentRow._id).then((res) => {
        if (res.Data.Data.附件) {
          this.附件Show = false;
        }
        this.form = res.Data.Data;
        this._id = res.Data._id;
        this.isLoading = false;
        this.dialogVisible = true;
      });
    },
    deletl_row() {
      if (this.currentRow == null) {
        this.$notify.error({
          title: "错误",
          message: "请选中一条数据后操作！",
        });
        return;
      }
      this.isLoading = true;
      this.$post("/Bs/Delete/不良记录/" + this.currentRow._id).then((res) => {
        this.getList();
      });
    },
    sp_click() {
      if (this.currentRow == null) {
        this.$notify.error({
          title: "错误",
          message: "请选中一条数据后操作！",
        });
        return;
      }
      this.dialogVisible_sp = true;
    },
    handleExportData() {
      // this.arrayExport
      for (const key in this.tableData) {
        let arrayRow = {};

        for (var i in this.tableLable) {
          if (this.tableData[key].Data[this.tableLable[i]] !== undefined) {
            arrayRow[this.tableLable[i]] =
              this.tableData[key].Data[this.tableLable[i]];
          } else {
            arrayRow[this.tableLable[i]] = "";
          }
        }
        arrayRow._id = this.tableData[key]._id;
        arrayRow.状态 = this.tableData[key].BaseInfo.Status;
        for (var j in this.tableData[key].UserList) {
          arrayRow.参与人员 +=
            this.tableData[key].UserList[j].UserInfo.UserName + " ";
        }
        this.arrayExport.push(arrayRow);
      }
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../../excel/Export2Excel");
        const tHeader = this.tableLable;
        // 上面设置Excel的表格第一行的标题
        const filterVal = this.tableLable;
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.arrayExport; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 上传
    upload_success(response, file, fileList) {
      this.form.附件 =
        this.baseUrl.bsIp + "/acdn/upload/" + response.Data.FileRelativePath;
      this.附件Show = false;
    },
    upload_delete() {
      this.form.附件 = "";
      this.附件Show = true;
    },
    open_windo(url) {
      window.open(url);
    },
  },
};
</script>

<style scoped lang='scss'>
.main {
  height: calc(100vh - 47px);
  background-color: #fff;
  overflow: hidden;
  .title {
    padding: 10px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #000;
  }
  .box {
    height: calc(100vh - 120px);
    padding: 0 10px;
  }
}
.fw700 {
  font-weight: 700;
}
.mt10 {
  margin-top: 10px;
}
.dpib {
  display: inline-block;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: #00710f;
  color: #fff;
}
.tar {
  text-align: right;
}
.tac {
  text-align: center;
}
::v-deep .el-upload__input {
  display: none;
}
</style>